<template>
    <a-modal :open="visible" title="上传扫描件" width="600px" forceRender :destroyOnClose="true" :maskClosable="false"
        @cancel="onClose">
        <a-upload-dragger name="zipFile" accept=".jpg,.png,.jpeg,.docx,.doc,.pdf" v-model:file-list="fileList"
            :remove="handleRemove" :before-upload="beforeUpload" :multiple="false" action="" @change="handleChange">
            <p class="ant-upload-drag-icon">
                <a-icon type="inbox" />
            </p>
            <p class="ant-upload-text">单击或拖动文件到此区域进行上传</p>
            <p class="ant-upload-hint">支持.jpg,.png,.jpeg,.docx,.doc,.pdf格式的文件</p>
            <p class="ant-upload-hint" style="color: #ff0000">请上传不超过100M的文件</p>
        </a-upload-dragger>
        <template #footer>
            <a-space>
                <a-button @click="onClose">取消</a-button>
                <a-button type="primary" :loading="uploading" @click="handleUpload"
                    :disabled="fileList.length === 0">上传</a-button>
            </a-space>
        </template>
    </a-modal>
</template>

<script setup>
    import { message } from 'ant-design-vue';
    import pcaa from 'china-area-data';
    import _ from 'lodash';
    import { nextTick, reactive, ref, defineProps, computed, toRaw } from 'vue';
    import { ProManageApi } from '/@/api/ProManage/ProManage-api';
    import AreaCascader from '/@/components/framework/area-cascader/index.vue';
    import { SmartLoading } from '/@/components/framework/smart-loading';
    import Upload from '/@/components/support/file-upload/index.vue';
    import { regular } from '/@/constants/regular-const';
    import { smartSentry } from '/@/lib/smart-sentry';
    import SmartEnumSelect from '/@/components/framework/smart-enum-select/index.vue';
    import moment from "moment"; //日期转化
    import { useUserStore } from '/@/store/modules/system/user';
    defineExpose({
        showModal,
    });

    const emit = defineEmits(['refresh']);
    // ====== 标题===============
    const title = ref("");

    // --------------------- modal 显示与隐藏 ---------------------
    // 是否展示
    const visible = ref(false);

    const passData = ref({});
    function showModal(data) {
        passData.value = data;// 传值
        visible.value = true;
        fileList.value = []
        uploading.value = false
    }
    // 文件
    const fileList = ref([]);
    const uploading = ref(false);
    /* 
          上传文件之前的钩子，参数为上传的文件，若返回 false 则停止上传。
          支持返回一个 Promise 对象，Promise 对象 reject 时则停止上传，
          resolve 时开始上传（ resolve 传入 File 或 Blob 对象则上传 resolve 传入对象）
          */
    const beforeUpload = (file) => {
        return new Promise((resolve, reject) => {
            const fileType = file.name.replace(/.+\./, '');
            const fileFormat =
                // .jpg,.png,.jpeg,.docx,.doc,.pdf
                fileType === 'pdf' ||
                fileType === 'docx' ||
                fileType === 'doc' ||
                fileType === 'jpg' ||
                fileType === 'png' ||
                fileType === 'jpeg'
            const fileSize = file.size !== 0;

            if (!fileFormat) {
                message.error('只能上传jpg,png,jpeg,docx,doc,pdf格式文件!');
                return false
            }
            const isLt2M = file.size / 1024 / 1024 < 100;
            if (!isLt2M) {
                message.error('文件大小不能超过100MB!');
                return false
            }
            if (!fileSize) {
                form.fileList.splice(form.fileList.indexOf(file), 1);
                message.error('不能上传空文件!');
                return false;
            }
            return resolve(false)
        });
    }
    // 移除文件
    const handleRemove = (file) => {
        const index = fileList.value.indexOf(file)
        const newFileList = fileList.value.slice()
        newFileList.splice(index, 1)
        fileList.value = newFileList
    }
    // 选择文件
    const handleChange = (info) => {
        //限制只上传一个文件，再次上传时则替换(覆盖)以前的文件
        let { fileList } = info
        if (fileList.length > 1) {
            fileList.splice(0, 1)
        }
        fileList.value = [...fileList]
    }
    // 点击上传文件
    async function handleUpload() {
        uploading.value = true
        try {
            const blclosureid = passData.value.blclosureid
            const formData = new FormData()

            let queryFormList = toRaw(fileList.value).value;
            formData.append('file', queryFormList[0].originFileObj)
            await ProManageApi.uploadTheDeclaration(blclosureid, formData);
            message.success(`提交成功`);
            emit('refresh');
            onClose();
        } catch (e) {
            smartSentry.captureError(e);
        } finally {
            uploading.value = false
        }
    }

    // --------------------- form 表单 ---------------------

    // 关闭弹框
    function onClose() {
        visible.value = false;
        fileList.value = []
    }
</script>

<style lang="less" scoped>
    .form-width {
        width: 100% !important;
    }

    .footer {
        width: 100%;
        display: flex;
        justify-content: flex-end;
    }

    :deep(.ant-card-body) {
        padding: 10px;
    }
</style>